<!DOCTYPE html>
<html lang="en">
<head>
<title>深度学习服务管理平台</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="../static/css/uniform.css" />
<link rel="stylesheet" href="../static/css/select2.css" />
<link rel="stylesheet" href="../static/css/matrix-style.css" />
<link rel="stylesheet" href="../static/css/matrix-media.css" />
<link href="../static/font-awesome/css/font-awesome.css" rel="stylesheet" />

</head>
<body>

<!--Header-part-->
<div id="header">
  <h1><a href="">Gpu Server</a></h1>
</div>
<!--close-Header-part--> 

<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
  <ul class="nav">
    <li  class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon icon-user"></i>  <span class="text">欢迎您 演示账号</span><b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-user"></i> 我的日志</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="icon-check"></i> 我的账号</a></li>
        <li class="divider"></li>
        <li><a href="../login"><i class="icon-key"></i> 退出</a></li>
      </ul>
    </li>
    <li class="dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope"></i> <span class="text">消息</span> <span class="label label-important">5</span> <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a class="sAdd" title="" href="#"><i class="icon-plus"></i> 新消息</a></li>
        <li><a class="sTrash" title="" href="#"><i class="icon-trash"></i> 删除消息</a></li>
      </ul>
    </li>
    <li class=""><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">设置</span></a></li>
    <li class=""><a title="" href="../logout"><i class="icon icon-share-alt"></i> <span class="text">退出登陆</span></a></li>
  </ul>
</div>

<!--start-top-serch-->
<div id="search">
  <input type="text" placeholder="Search here..."/>
  <button type="submit" class="tip-bottom" title="Search"><i class="icon-search icon-white"></i></button>
</div>
<!--close-top-serch--> 

<!--sidebar-menu-->

<div id="sidebar"> <a href="#" class="visible-phone"><i class="icon icon-th"></i>Tables</a>
  <ul>
    <li class="submenu"> <a href=""><i class="icon icon-th-list"></i> <span>任务管理</span> <span class="label label-important">4</span></a>
      <ul>
        <li><a href="taskdemo">图片识别demo</a></li>
        <li><a href="taskvideodemo">视频识别demo</a></li>
        <li><a href="idletaskdemo">闲置宅基地识别demo</a></li>
        <li><a href="taskchangedetecdemo">地表变化检测demo</a></li>
        <li><a href="tasklist">当前任务</a></li>
      </ul>
    </li>

    <li class="submenu"> <a href=""><i class="icon icon-info-sign"></i> <span>系统管理</span> <span class="label label-important">1</span></a>
      <ul>
        <li><a href="appedtionlist">app版本下载</a></li>
        <li><a href="versionlog">版本更新</a></li>
      </ul>
    </li>

    <li class="content"> <span>GPU利用率</span>
      <div class="progress progress-mini progress-danger active progress-striped">
        <div style="width: 77%;" class="bar"></div>
      </div>
      <span class="percent">78%</span>
      <div class="stat">18720MB/24000MB</div>
    </li>
    <li class="content"> <span>磁盘空间利用率</span>
      <div class="progress progress-mini active progress-striped">
        <div style="width: 87%;" class="bar"></div>
      </div>
      <span class="percent">65%</span>
      <div class="stat">4160GB/ 6500GB</div>
    </li>
  </ul>
</div>
<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">任务管理</a> </div>
    <h1>深度学习任务实时调度监控</h1>
  </div>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">

        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>任务列表数据</h5>
          </div>
          <div class="widget-content nopadding">
            <table class="table" id="tabletr"  style="text-align: center;">
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Footer-part-->
<div class="row-fluid">
  <div id="footer" class="span12"> 2019 &copy; Deeep Learning  <a href="" target="_blank" title="">西南交通大学中国土地信息大数据研究院</a>   </div>
</div>
<!--end-Footer-part-->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/jquery.ui.custom.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.uniform.js"></script>
<script src="../static/js/select2.min.js"></script>
<script src="../static/js/jquery.dataTables.min.js"></script>
<script src="../static/js/matrix.js"></script>



<script type="text/javascript">

  function changestatus(a)
  {
    if(a.taskstatus==1)
       return '队列中';
    if(a.taskstatus==2)
        if(a.tasktype==2)
          return '计算中('+a.outmessage+'%)';
        else
          return '计算中';
    if(a.taskstatus==3)
      return '计算完成';
    if(a.taskstatus==4)
      return '取值完成';
    if(a.taskstatus==5)
      return '其他错误';
    if(a.taskstatus==6)
      return '视频和图片格斯错误';
    if(a.taskstatus==7)
      return '网络任务切换中';
    if(a.taskstatus==-1)
      return '系统错误';
  }
  var n=0;
  var p="";
  function getList()
  {
    n=n+1;
    $.ajax({
      type : "GET",
      url : "../file/tasklist?rid="+new Date(),
      data : {
        method : "query"
      },
      dataType : "json",//返回的数据类型
      success : function(data) {
        var html = ' <tr><td>序号</td>' +
                '<td>使用用户</td>' +
                '<td>任务名称</td>' +
                '<td>图片名称</td>' +
                '<td>用户提交IP</td> ' +
                '<td>用户提交时间</td>' +
                '<td>任务状态</td>' +
                '<td>返回结果</td>'+
                '<td>返回时间</td></tr>';
        for ( var i = 0; i < data.length; i++) {//循环json对象，拼接tr,td的html
          html = html + '<tr>';
          html = html + '<td>' + (i+1)+ '</td>';
          html = html + '<td>' + data[i].username + '</td>';
          html = html + '<td>' + data[i].taskname + '</td>';
          html = html + '<td>' + data[i].userimage + '</td>';
          html = html + '<td>' + data[i].userip + '</td>';
          html = html + '<td>' + data[i].usertime + '</td>';
          html = html + '<td>' + changestatus(data[i]) + '</td>';
          html = html + '<td ><a href="webdownload?userimage='+data[i].userimage+'&tasktype='+data[i].tasktype+'" >结果下载</a>  | <a href="taskdel?id='+data[i].id+'">删除任务</a> </td>';
          html = html + '<td >' + data[i].overtime + '</td>';
          html = html + '</tr>';
        }
        if(p!=html ) {
          $('#tabletr').html(html);//通过jquery方式获取table，并把tr,td的html输出到table中
        }
        p=html;
      },
      error : function() {
        if(n%20==0) {
          alert("服务器连接失败！");
          n=0;
        }
      }
    });
  }

  $(function () {
    setInterval("getList()", 1500);
  })
</script>

</body>
</html>
